<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>恋爱盲盒 - 盒你相遇</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.9/dayjs.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#FF6B81',
            secondary: '#4CD964',
            tertiary: '#5AC8FA',
            dark: '#333333',
            light: '#F9F9F9',
            'neutral-100': '#F5F5F5',
            'neutral-200': '#E5E5E5',
            'neutral-300': '#D4D4D4',
            'neutral-400': '#A3A3A3',
            'neutral-500': '#737373',
            'neutral-600': '#525252',
            'neutral-700': '#404040',
            'neutral-800': '#262626',
            'neutral-900': '#171717',
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
          animation: {
            'float': 'float 3s ease-in-out infinite',
            'bounce-slow': 'bounce 3s infinite',
          },
          keyframes: {
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-10px)' },
            }
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .bg-gradient-primary {
        background: linear-gradient(135deg, #FF6B81 0%, #FF95A3 100%);
      }
      .bg-gradient-card {
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 100%);
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .card-hover {
        transition: all 0.3s ease;
      }
      .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
      }
      .glassmorphism {
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.18);
      }
    }
  </style>
</head>
<body class="font-inter bg-gradient-to-b from-neutral-100 to-white min-h-screen">
  <div id="app"></div>

  <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router@4.2.4/dist/vue-router.global.prod.min.js"></script>
  
  <script>
    // 模拟API数据
    const mockApi = {
      // 获取用户信息
      getUserInfo() {
        return {
          id: 1,
          username: "用户12345",
          avatar: "https://picsum.photos/200/200?random=1",
          freeDrawCount: 3,
          putNotes: [
            {
              id: 1,
              name: "小明",
              gender: "male",
              school: "XX大学",
              content: "热爱运动，喜欢打篮球和跑步，希望能认识一个开朗活泼的女生。",
              images: ["https://picsum.photos/300/300?random=10", "https://picsum.photos/300/300?random=11"],
              time: "2023-05-15T10:30:00",
              viewCount: 5,
              drawCount: 2
            }
          ],
          drawnNotes: [
            {
              id: 2,
              userId: 2,
              name: "小红",
              gender: "female",
              school: "YY大学",
              content: "喜欢阅读和旅行，希望能找到一个有共同爱好的男生一起探索世界。",
              images: ["https://picsum.photos/300/300?random=12"],
              time: "2023-05-16T14:15:00",
              isFriend: false
            },
            {
              id: 3,
              userId: 3,
              name: "小李",
              gender: "male",
              school: "ZZ大学",
              content: "计算机专业，喜欢编程和玩游戏，寻找一个能一起开黑的小伙伴。",
              images: [],
              time: "2023-05-14T09:45:00",
              isFriend: true
            }
          ]
        };
      },
      
      // 获取纸条池数据
      getNotePool() {
        return {
          male: 12,
          female: 18
        };
      },
      
      // 获取任务列表
      getTasks() {
        return [
          { id: 1, title: '分享三次活动页', progress: '0/3', btnText: '去分享', type: 'share' },
          { id: 2, title: '完善个人信息', progress: '0/1', btnText: '去完善', type: 'profile' },
          { id: 3, title: '邀请好友参与', progress: '0/2', btnText: '去邀请', type: 'invite' }
        ];
      },
      
      // 抽取纸条
      drawNote(gender) {
        return new Promise((resolve) => {
          setTimeout(() => {
            const notes = [
              {
                id: 4,
                userId: 4,
                name: "小张",
                gender: "female",
                school: "AA大学",
                content: "喜欢音乐和绘画，梦想是成为一名设计师。希望能遇到一个有艺术细胞的男生。",
                images: ["https://picsum.photos/300/300?random=13", "https://picsum.photos/300/300?random=14"],
                time: new Date().toISOString()
              },
              {
                id: 5,
                userId: 5,
                name: "小王",
                gender: "male",
                school: "BB大学",
                content: "热爱户外运动，尤其是爬山和露营。希望能找到一个同样喜欢大自然的伴侣。",
                images: ["https://picsum.photos/300/300?random=15"],
                time: new Date().toISOString()
              }
            ];
            
            const filteredNotes = gender ? notes.filter(note => note.gender === gender) : notes;
            const randomNote = filteredNotes[Math.floor(Math.random() * filteredNotes.length)];
            resolve(randomNote);
          }, 1000);
        });
      },
      
      // 投放纸条
      putNote(noteData) {
        return new Promise((resolve) => {
          setTimeout(() => {
            const newNote = {
              id: Math.floor(Math.random() * 1000),
              ...noteData,
              time: new Date().toISOString(),
              viewCount: 0,
              drawCount: 0
            };
            resolve(newNote);
          }, 1000);
        });
      },
      
      // 添加好友
      addFriend(userId) {
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve(true);
          }, 1000);
        });
      },
      
      // 删除纸条
      deleteNote(noteId) {
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve(true);
          }, 1000);
        });
      },
      
      // 举报纸条
      reportNote(noteId, reason) {
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve(true);
          }, 1000);
        });
      },
      
      // 完成任务
      completeTask(taskId) {
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve(true);
          }, 1000);
        });
      }
    };

    // 全局组件 - 导航栏
    const Navbar = {
      props: ['title', 'showBack'],
      template: `
        <nav class="fixed top-0 left-0 right-0 z-50 glassmorphism py-3 px-4 flex items-center justify-between shadow-md">
          <div v-if="showBack" @click="$router.back()" class="cursor-pointer">
            <i class="fa fa-arrow-left text-neutral-700 text-xl"></i>
          </div>
          <h1 class="text-xl font-semibold text-neutral-800 text-center flex-1 mx-4">{{ title }}</h1>
          <div v-if="!showBack" class="w-6"></div>
          <div v-if="showBack" class="w-6"></div>
        </nav>
      `
    };

    // 全局组件 - 任务列表
    const TaskList = {
      props: ['tasks'],
      emits: ['complete-task'],
      template: `
        <div class="mt-6 p-4 bg-white rounded-xl shadow-lg">
          <h3 class="text-lg font-semibold text-neutral-800 mb-4">获取抽取机会</h3>
          <ul>
            <li v-for="task in tasks" :key="task.id" class="flex items-center justify-between py-3 border-b border-neutral-200 last:border-0">
              <div class="flex items-center">
                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                  <i class="fa fa-trophy text-primary"></i>
                </div>
                <div>
                  <p class="text-neutral-800 font-medium">{{ task.title }}</p>
                  <p class="text-sm text-neutral-500">{{ task.progress }}</p>
                </div>
              </div>
              <button 
                @click="$emit('complete-task', task.id)" 
                class="px-4 py-1.5 bg-primary text-white rounded-full text-sm font-medium transition-all hover:bg-primary/90"
              >
                {{ task.btnText }}
              </button>
            </li>
          </ul>
        </div>
      `
    };

    // 全局组件 - 性别筛选器
    const GenderFilter = {
      props: {
        currentGender: {
          type: String,
          default: ''
        }
      },
      emits: ['update:current-gender'],
      template: `
        <div class="flex justify-center items-center mb-6">
          <button
            :class="{ 'bg-secondary text-white': currentGender === 'male', 'bg-white text-neutral-600': currentGender !== 'male' }"
            @click="$emit('update:current-gender', 'male')"
            class="px-6 py-2 rounded-full font-medium shadow-md transition-all hover:shadow-lg mr-3"
          >
            <i class="fa fa-male mr-1"></i> 男生
          </button>
          <button
            :class="{ 'bg-secondary text-white': currentGender === 'female', 'bg-white text-neutral-600': currentGender !== 'female' }"
            @click="$emit('update:current-gender', 'female')"
            class="px-6 py-2 rounded-full font-medium shadow-md transition-all hover:shadow-lg"
          >
            <i class="fa fa-female mr-1"></i> 女生
          </button>
        </div>
      `
    };

    // 全局组件 - 图片上传预览
    const ImageUploader = {
      props: {
        images: {
          type: Array,
          default: () => []
        },
        maxImages: {
          type: Number,
          default: 3
        }
      },
      emits: ['update:images'],
      methods: {
        handleFileSelect(event) {
          const files = event.target.files;
          if (!files.length) return;
          
          const newImages = [...this.images];
          for (let i = 0; i < files.length && newImages.length < this.maxImages; i++) {
            const file = files[i];
            if (file.type.startsWith('image/')) {
              const reader = new FileReader();
              reader.onload = (e) => {
                newImages.push(e.target.result);
                this.$emit('update:images', newImages);
              };
              reader.readAsDataURL(file);
            }
          }
          
          // 重置input，以便可以重复选择同一文件
          event.target.value = '';
        },
        removeImage(index) {
          const newImages = [...this.images];
          newImages.splice(index, 1);
          this.$emit('update:images', newImages);
        }
      },
      template: `
        <div class="mt-4">
          <div class="flex flex-wrap gap-3">
            <div 
              v-for="(image, index) in images" 
              :key="index" 
              class="relative w-24 h-24 rounded-lg overflow-hidden"
            >
              <img :src="image" alt="上传的图片" class="w-full h-full object-cover" />
              <button 
                @click="removeImage(index)" 
                class="absolute top-1 right-1 w-6 h-6 bg-red-500/80 rounded-full flex items-center justify-center text-white"
              >
                <i class="fa fa-times"></i>
              </button>
            </div>
            <div 
              v-if="images.length < maxImages" 
              class="w-24 h-24 border-2 border-dashed border-neutral-300 rounded-lg flex items-center justify-center cursor-pointer"
            >
              <label class="cursor-pointer flex flex-col items-center justify-center">
                <i class="fa fa-camera text-neutral-400 text-2xl"></i>
                <p class="text-xs text-neutral-500 mt-1">上传图片</p>
                <input type="file" multiple accept="image/*" @change="handleFileSelect" class="hidden" />
              </label>
            </div>
          </div>
          <p class="text-xs text-neutral-500 mt-2">最多上传 {{ maxImages }} 张图片</p>
        </div>
      `
    };

    // 首页组件
    const HomePage = {
      components: {
        TaskList,
        GenderFilter
      },
      data() {
        return {
          userInfo: null,
          notePool: null,
          tasks: null,
          selectedGender: '',
          loading: true
        };
      },
      created() {
        this.fetchData();
      },
      methods: {
        async fetchData() {
          try {
            this.userInfo = mockApi.getUserInfo();
            this.notePool = mockApi.getNotePool();
            this.tasks = mockApi.getTasks();
            this.loading = false;
          } catch (error) {
            console.error('获取数据失败:', error);
            this.loading = false;
          }
        },
        handleDraw() {
          this.$router.push({ name: 'Draw', params: { gender: this.selectedGender } });
        },
        handlePutNote() {
          this.$router.push({ name: 'PutNote' });
        },
        handleTaskComplete(taskId) {
          // 模拟完成任务
          console.log('完成任务:', taskId);
          mockApi.completeTask(taskId).then(() => {
            // 更新任务状态
            const taskIndex = this.tasks.findIndex(task => task.id === taskId);
            if (taskIndex !== -1) {
              this.tasks[taskIndex].progress = '1/' + this.tasks[taskIndex].progress.split('/')[1];
              this.tasks[taskIndex].btnText = '已完成';
              
              // 更新免费抽取次数
              this.userInfo.freeDrawCount += 1;
            }
          });
        }
      },
      template: `
        <div class="min-h-screen pt-20 pb-16 px-4">
          <div class="text-center mb-8">
            <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-primary mb-2 text-shadow">恋爱盲盒</h1>
            <p class="text-neutral-600 max-w-md mx-auto">在茫茫人海中，寻找那个与你心灵相通的人</p>
          </div>
          
          <!-- 3D形象与气泡 -->
          <div class="relative h-64 mb-8 flex items-center justify-center">
            <div class="relative w-48 h-48">
              <img src="https://picsum.photos/200/200?random=2" alt="恋爱盲盒形象" class="w-full h-full object-cover rounded-full shadow-xl animate-float" />
              
              <!-- 气泡装饰 -->
              <div class="absolute -top-4 -left-4 w-12 h-12 bg-secondary/20 rounded-full animate-bounce-slow"></div>
              <div class="absolute top-1/3 -right-2 w-8 h-8 bg-primary/20 rounded-full animate-bounce-slow" style="animation-delay: 0.5s"></div>
              <div class="absolute bottom-1/4 -left-3 w-10 h-10 bg-tertiary/20 rounded-full animate-bounce-slow" style="animation-delay: 1s"></div>
            </div>
          </div>
          
          <!-- 纸条池数据 -->
          <div class="bg-white rounded-xl shadow-lg p-5 mb-6">
            <h3 class="text-lg font-semibold text-neutral-800 mb-4">当前纸条池</h3>
            <div class="flex justify-between items-center">
              <div class="flex items-center">
                <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                  <i class="fa fa-male text-blue-600"></i>
                </div>
                <div>
                  <p class="text-sm text-neutral-500">男生</p>
                  <p class="text-lg font-bold text-neutral-800">{{ notePool?.male || 0 }}</p>
                </div>
              </div>
              <div class="flex items-center">
                <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center mr-3">
                  <i class="fa fa-female text-pink-600"></i>
                </div>
                <div>
                  <p class="text-sm text-neutral-500">女生</p>
                  <p class="text-lg font-bold text-neutral-800">{{ notePool?.female || 0 }}</p>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 性别筛选 -->
          <GenderFilter 
            :current-gender="selectedGender" 
            @update:current-gender="selectedGender = $event" 
          />
          
          <!-- 操作按钮 -->
          <div class="grid grid-cols-2 gap-4 mb-8">
            <button 
              @click="handleDraw" 
              class="bg-primary hover:bg-primary/90 text-white py-3 rounded-xl shadow-lg transition-all transform hover:scale-105 flex items-center justify-center"
            >
              <i class="fa fa-gift mr-2"></i>
              <span>抽取纸条</span>
              <span v-if="userInfo?.freeDrawCount > 0" class="ml-2 px-2 py-0.5 bg-white text-primary text-xs rounded-full">免费{{ userInfo.freeDrawCount }}次</span>
            </button>
            <button 
              @click="handlePutNote" 
              class="bg-white hover:bg-neutral-50 text-primary border border-primary py-3 rounded-xl shadow-lg transition-all transform hover:scale-105 flex items-center justify-center"
            >
              <i class="fa fa-paper-plane mr-2"></i>
              <span>投放纸条</span>
            </button>
          </div>
          
          <!-- 任务列表 -->
          <TaskList :tasks="tasks" @complete-task="handleTaskComplete" />
        </div>
      `
    };

    // 投放纸条编辑页组件
    const PutNotePage = {
      components: {
        Navbar,
        ImageUploader
      },
      data() {
        return {
          form: {
            name: '',
            gender: 'male',
            school: '',
            content: '',
            images: []
          },
          maxContentLength: 500,
          isSubmitting: false
        };
      },
      computed: {
        remainingContentLength() {
          return this.maxContentLength - this.form.content.length;
        },
        isFormValid() {
          return (
            this.form.name.trim() &&
            this.form.school.trim() &&
            this.form.content.trim()
          );
        }
      },
      methods: {
        async handleSubmit() {
          if (!this.isFormValid || this.isSubmitting) return;
          
          this.isSubmitting = true;
          
          try {
            // 模拟API请求
            const newNote = await mockApi.putNote(this.form);
            
            // 显示成功提示
            alert('纸条投放成功！');
            
            // 导航回首页
            this.$router.push({ name: 'Home' });
          } catch (error) {
            console.error('投放纸条失败:', error);
            alert('投放失败，请稍后再试');
          } finally {
            this.isSubmitting = false;
          }
        }
      },
      template: `
        <div class="min-h-screen bg-neutral-100">
          <Navbar title="投放我的信息" showBack="true" />
          
          <div class="pt-20 pb-16 px-4">
            <div class="bg-white rounded-xl shadow-lg p-5 mb-6">
              <h3 class="text-lg font-semibold text-neutral-800 mb-4">填写个人信息</h3>
              
              <div class="space-y-4">
                <div>
                  <label class="block text-sm font-medium text-neutral-700 mb-1">昵称</label>
                  <input 
                    v-model="form.name" 
                    type="text" 
                    class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all"
                    placeholder="请输入你的昵称"
                  />
                </div>
                
                <div>
                  <label class="block text-sm font-medium text-neutral-700 mb-1">性别</label>
                  <div class="flex space-x-4">
                    <label class="inline-flex items-center cursor-pointer">
                      <input 
                        type="radio" 
                        name="gender" 
                        value="male" 
                        v-model="form.gender" 
                        class="w-4 h-4 text-primary focus:ring-primary border-neutral-300"
                      />
                      <span class="ml-2 text-neutral-700">男</span>
                    </label>
                    <label class="inline-flex items-center cursor-pointer">
                      <input 
                        type="radio" 
                        name="gender" 
                        value="female" 
                        v-model="form.gender" 
                        class="w-4 h-4 text-primary focus:ring-primary border-neutral-300"
                      />
                      <span class="ml-2 text-neutral-700">女</span>
                    </label>
                  </div>
                </div>
                
                <div>
                  <label class="block text-sm font-medium text-neutral-700 mb-1">学校</label>
                  <input 
                    v-model="form.school" 
                    type="text" 
                    class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all"
                    placeholder="请输入你的学校"
                  />
                </div>
                
                <div>
                  <label class="block text-sm font-medium text-neutral-700 mb-1">自我介绍</label>
                  <textarea 
                    v-model="form.content" 
                    rows="4" 
                    class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all resize-none"
                    placeholder="请输入你的自我介绍（不超过500字）"
                  ></textarea>
                  <div class="text-right text-xs text-neutral-500 mt-1">
                    {{ remainingContentLength }}/{{ maxContentLength }}
                  </div>
                </div>
                
                <div>
                  <label class="block text-sm font-medium text-neutral-700 mb-1">上传照片</label>
                  <ImageUploader 
                    :images="form.images" 
                    @update:images="form.images = $event" 
                  />
                </div>
              </div>
            </div>
            
            <button 
              @click="handleSubmit" 
              :disabled="!isFormValid || isSubmitting"
              class="w-full bg-primary hover:bg-primary/90 text-white py-3 rounded-xl shadow-lg transition-all transform hover:scale-105 disabled:opacity-70 disabled:cursor-not-allowed"
            >
              {{ isSubmitting ? '投放中...' : '立即放入纸条' }}
            </button>
          </div>
        </div>
      `
    };

    // 抽取页组件
    const DrawPage = {
      components: {
        Navbar,
        GenderFilter
      },
      props: {
        gender: {
          type: String,
          default: ''
        }
      },
      data() {
        return {
          userInfo: null,
          selectedGender: this.gender,
          isDrawing: false,
          noteResult: null
        };
      },
      created() {
        this.userInfo = mockApi.getUserInfo();
      },
      methods: {
        async handleDraw() {
          if (this.isDrawing) return;
          
          this.isDrawing = true;
          this.noteResult = null;
          
          try {
            // 模拟抽取过程
            const note = await mockApi.drawNote(this.selectedGender);
            this.noteResult = note;
            
            // 更新免费抽取次数
            if (this.userInfo.freeDrawCount > 0) {
              this.userInfo.freeDrawCount -= 1;
            }
          } catch (error) {
            console.error('抽取失败:', error);
            alert('抽取失败，请稍后再试');
          } finally {
            this.isDrawing = false;
          }
        },
        viewNoteDetail() {
          this.$router.push({ name: 'NoteDetail', params: { noteData: this.noteResult } });
        }
      },
      template: `
        <div class="min-h-screen bg-neutral-100">
          <Navbar title="抽取纸条" showBack="true" />
          
          <div class="pt-20 pb-16 px-4">
            <div class="text-center mb-8">
              <h2 class="text-xl font-semibold text-neutral-800">寻找你的心动对象</h2>
              <p class="text-neutral-500 mt-2">抽取一张纸条，看看谁在等你</p>
            </div>
            
            <!-- 性别筛选 -->
            <GenderFilter 
              :current-gender="selectedGender" 
              @update:current-gender="selectedGender = $event" 
            />
            
            <!-- 盲盒动画 -->
            <div class="flex justify-center mb-8">
              <div class="relative w-64 h-64">
                <img 
                  src="https://picsum.photos/300/300?random=3" 
                  alt="盲盒" 
                  class="w-full h-full object-cover rounded-xl shadow-xl"
                />
                
                <!-- 抽取动画 -->
                <div v-if="isDrawing" class="absolute inset-0 bg-black/50 rounded-xl flex items-center justify-center">
                  <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-primary"></div>
                </div>
                
                <!-- 抽取结果 -->
                <div v-if="noteResult" class="absolute inset-0 bg-black/70 rounded-xl flex flex-col items-center justify-center text-white p-4">
                  <p class="text-xl font-semibold mb-2">抽取成功！</p>
                  <p class="text-center mb-4">你抽到了一个<span v-if="noteResult.gender === 'male'">男生</span><span v-if="noteResult.gender === 'female'">女生</span>的纸条</p>
                  <button 
                    @click="viewNoteDetail" 
                    class="px-6 py-2 bg-primary text-white rounded-full font-medium transition-all hover:bg-primary/90"
                  >
                    查看详情
                  </button>
                </div>
              </div>
            </div>
            
            <button 
              @click="handleDraw" 
              :disabled="isDrawing"
              class="w-full bg-primary hover:bg-primary/90 text-white py-3 rounded-xl shadow-lg transition-all transform hover:scale-105 disabled:opacity-70 disabled:cursor-not-allowed"
            >
              {{ isDrawing ? '抽取中...' : '开始抽取' }}
            </button>
            
            <p class="text-center text-sm text-neutral-500 mt-4">
              剩余免费抽取次数: <span class="font-semibold text-primary">{{ userInfo?.freeDrawCount || 0 }}</span>
            </p>
          </div>
        </div>
      `
    };

    // 纸条详情页组件
    const NoteDetailPage = {
      components: {
        Navbar,
        TaskList
      },
      props: {
        noteData: {
          type: Object,
          required: true
        }
      },
      data() {
        return {
          note: null,
          isMyNote: false,
          tasks: null,
          showReportDialog: false,
          reportReason: ''
        };
      },
      created() {
        this.note = this.noteData;
        this.isMyNote = this.note.userId === 1; // 假设userId=1是当前用户
        this.tasks = mockApi.getTasks();
      },
      computed: {
        formattedTime() {
          return dayjs(this.note.time).format('YYYY-MM-DD HH:mm');
        }
      },
      methods: {
        async handleAddFriend() {
          try {
            await mockApi.addFriend(this.note.userId);
            alert('好友申请已发送！');
            this.note.isFriend = true;
          } catch (error) {
            console.error('添加好友失败:', error);
            alert('添加好友失败，请稍后再试');
          }
        },
        async handleDeleteNote() {
          if (!confirm('确定要删除这张纸条吗？')) return;
          
          try {
            await mockApi.deleteNote(this.note.id);
            alert('纸条已删除！');
            this.$router.back();
          } catch (error) {
            console.error('删除纸条失败:', error);
            alert('删除失败，请稍后再试');
          }
        },
        handleReport() {
          this.showReportDialog = true;
        },
        async submitReport() {
          if (!this.reportReason.trim()) {
            alert('请选择举报原因');
            return;
          }
          
          try {
            await mockApi.reportNote(this.note.id, this.reportReason);
            alert('举报已提交，我们将尽快处理！');
            this.showReportDialog = false;
            this.reportReason = '';
          } catch (error) {
            console.error('举报失败:', error);
            alert('举报失败，请稍后再试');
          }
        }
      },
      template: `
        <div class="min-h-screen bg-neutral-100">
          <Navbar title="纸条详情" showBack="true" />
          
          <div class="pt-20 pb-16 px-4">
            <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6">
              <!-- 头部信息 -->
              <div class="bg-gradient-primary p-5 text-white">
                <div class="flex items-center justify-between">
                  <div class="flex items-center">
                    <img 
                      :src="note.gender === 'male' ? 'https://picsum.photos/100/100?random=4' : 'https://picsum.photos/100/100?random=5'" 
                      alt="用户头像" 
                      class="w-14 h-14 rounded-full object-cover border-2 border-white"
                    />
                    <div class="ml-3">
                      <h3 class="text-lg font-semibold">{{ note.name }}</h3>
                      <p class="text-sm opacity-80">{{ note.school }}</p>
                    </div>
                  </div>
                  <div v-if="isMyNote" class="text-right">
                    <p class="text-xs opacity-80">我的信息</p>
                  </div>
                  <div v-else class="text-right">
                    <button @click="handleReport" class="text-white text-sm opacity-80 hover:opacity-100">
                      <i class="fa fa-flag mr-1"></i> 举报
                    </button>
                  </div>
                </div>
              </div>
              
              <!-- 内容 -->
              <div class="p-5">
                <p class="text-neutral-800 mb-4">{{ note.content }}</p>
                
                <!-- 图片 -->
                <div class="grid grid-cols-2 gap-3 mb-4" v-if="note.images && note.images.length > 0">
                  <img 
                    v-for="(image, index) in note.images" 
                    :key="index" 
                    :src="image" 
                    alt="个人照片" 
                    class="w-full h-32 object-cover rounded-lg"
                  />
                </div>
                
                <!-- 时间和浏览量 -->
                <div class="flex items-center justify-between text-sm text-neutral-500">
                  <p>{{ formattedTime }}</p>
                  <p v-if="isMyNote">浏览量: {{ note.viewCount || 0 }}</p>
                </div>
              </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="grid grid-cols-2 gap-4 mb-8" v-if="!isMyNote">
              <button 
                @click="handleAddFriend" 
                class="bg-secondary hover:bg-secondary/90 text-white py-3 rounded-xl shadow-lg transition-all transform hover:scale-105 flex items-center justify-center"
              >
                <i class="fa fa-user-plus mr-2"></i>
                <span>{{ note.isFriend ? '已添加' : '添加好友' }}</span>
              </button>
              <button 
                @click="$router.push({ name: 'Draw' })" 
                class="bg-white hover:bg-neutral-50 text-primary border border-primary py-3 rounded-xl shadow-lg transition-all transform hover:scale-105 flex items-center justify-center"
              >
                <i class="fa fa-refresh mr-2"></i>
                <span>再抽一次</span>
              </button>
            </div>
            
            <div v-if="isMyNote" class="mb-8">
              <button 
                @click="handleDeleteNote" 
                class="w-full bg-red-500 hover:bg-red-600 text-white py-3 rounded-xl shadow-lg transition-all transform hover:scale-105"
              >
                <i class="fa fa-trash mr-2"></i> 删除纸条
              </button>
            </div>
            
            <!-- 任务列表 -->
            <TaskList :tasks="tasks" />
          </div>
          
          <!-- 举报对话框 -->
          <div v-if="showReportDialog" class="fixed inset-0 z-50 flex items-center justify-center">
            <div class="absolute inset-0 bg-black/50"></div>
            <div class="relative bg-white rounded-xl p-5 max-w-md w-full mx-4 shadow-2xl">
              <h3 class="text-lg font-semibold text-neutral-800 mb-4">举报内容</h3>
              <p class="text-neutral-600 mb-4">请选择举报原因</p>
              
              <div class="space-y-2 mb-4">
                <label class="flex items-center p-3 border border-neutral-200 rounded-lg cursor-pointer hover:bg-neutral-50">
                  <input 
                    type="radio" 
                    name="reportReason" 
                    value="广告" 
                    v-model="reportReason" 
                    class="w-4 h-4 text-primary focus:ring-primary border-neutral-300"
                  />
                  <span class="ml-2 text-neutral-700">广告</span>
                </label>
                <label class="flex items-center p-3 border border-neutral-200 rounded-lg cursor-pointer hover:bg-neutral-50">
                  <input 
                    type="radio" 
                    name="reportReason" 
                    value="骚扰" 
                    v-model="reportReason" 
                    class="w-4 h-4 text-primary focus:ring-primary border-neutral-300"
                  />
                  <span class="ml-2 text-neutral-700">骚扰</span>
                </label>
                <label class="flex items-center p-3 border border-neutral-200 rounded-lg cursor-pointer hover:bg-neutral-50">
                  <input 
                    type="radio" 
                    name="reportReason" 
                    value="虚假信息" 
                    v-model="reportReason" 
                    class="w-4 h-4 text-primary focus:ring-primary border-neutral-300"
                  />
                  <span class="ml-2 text-neutral-700">虚假信息</span>
                </label>
                <label class="flex items-center p-3 border border-neutral-200 rounded-lg cursor-pointer hover:bg-neutral-50">
                  <input 
                    type="radio" 
                    name="reportReason" 
                    value="其他" 
                    v-model="reportReason" 
                    class="w-4 h-4 text-primary focus:ring-primary border-neutral-300"
                  />
                  <span class="ml-2 text-neutral-700">其他</span>
                </label>
              </div>
              
              <div class="flex space-x-3">
                <button 
                  @click="showReportDialog = false" 
                  class="flex-1 px-4 py-2 border border-neutral-300 rounded-lg text-neutral-700 hover:bg-neutral-50"
                >
                  取消
                </button>
                <button 
                  @click="submitReport" 
                  class="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90"
                >
                  提交举报
                </button>
              </div>
            </div>
          </div>
        </div>
      `
    };

    // 我的纸条页面组件
    const MyNotesPage = {
      components: {
        Navbar
      },
      data() {
        return {
          userInfo: null,
          activeTab: 'put', // put: 我放入的, drawn: 我抽到的
          showMenuIndex: -1
        };
      },
      created() {
        this.userInfo = mockApi.getUserInfo();
      },
      computed: {
        putNotes() {
          return this.userInfo?.putNotes || [];
        },
        drawnNotes() {
          return this.userInfo?.drawnNotes || [];
        }
      },
      methods: {
        formatTime(time) {
          return dayjs(time).format('YYYY-MM-DD HH:mm');
        },
        viewNoteDetail(note, isMyNote) {
          this.$router.push({ 
            name: 'NoteDetail', 
            params: { 
              noteData: {
                ...note,
                isMyNote
              }
            } 
          });
        },
        async handleDeleteNote(noteId) {
          if (!confirm('确定要删除这张纸条吗？')) return;
          
          try {
            await mockApi.deleteNote(noteId);
            
            // 更新列表
            if (this.activeTab === 'put') {
              this.userInfo.putNotes = this.userInfo.putNotes.filter(note => note.id !== noteId);
            } else {
              this.userInfo.drawnNotes = this.userInfo.drawnNotes.filter(note => note.id !== noteId);
            }
            
            alert('纸条已删除！');
          } catch (error) {
            console.error('删除纸条失败:', error);
            alert('删除失败，请稍后再试');
          }
        },
        async handleAddFriend(userId, index) {
          try {
            await mockApi.addFriend(userId);
            alert('好友申请已发送！');
            
            // 更新状态
            this.userInfo.drawnNotes[index].isFriend = true;
          } catch (error) {
            console.error('添加好友失败:', error);
            alert('添加好友失败，请稍后再试');
          }
        },
        toggleMenu(index) {
          this.showMenuIndex = this.showMenuIndex === index ? -1 : index;
        },
        async handleReport(noteId) {
          const reason = prompt('请输入举报原因:');
          if (!reason) return;
          
          try {
            await mockApi.reportNote(noteId, reason);
            alert('举报已提交，我们将尽快处理！');
          } catch (error) {
            console.error('举报失败:', error);
            alert('举报失败，请稍后再试');
          }
        }
      },
      template: `
        <div class="min-h-screen bg-neutral-100">
          <Navbar title="我的纸条" showBack="true" />
          
          <div class="pt-20 pb-16 px-4">
            <!-- 标签页切换 -->
            <div class="flex border-b border-neutral-200 mb-6">
              <button 
                :class="{ 'border-b-2 border-primary text-primary': activeTab === 'put' }"
                @click="activeTab = 'put'"
                class="px-4 py-2 font-medium"
              >
                我放入的
              </button>
              <button 
                :class="{ 'border-b-2 border-primary text-primary': activeTab === 'drawn' }"
                @click="activeTab = 'drawn'"
                class="px-4 py-2 font-medium"
              >
                我抽到的
              </button>
            </div>
            
            <!-- 列表内容 -->
            <div class="space-y-4">
              <div v-if="activeTab === 'put' && putNotes.length === 0" class="text-center py-12 text-neutral-500">
                <i class="fa fa-paper-plane text-4xl mb-3 opacity-30"></i>
                <p>你还没有投放任何纸条</p>
                <button 
                  @click="$router.push({ name: 'PutNote' })" 
                  class="mt-4 px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90"
                >
                  立即投放
                </button>
              </div>
              
              <div v-if="activeTab === 'drawn' && drawnNotes.length === 0" class="text-center py-12 text-neutral-500">
                <i class="fa fa-gift text-4xl mb-3 opacity-30"></i>
                <p>你还没有抽取任何纸条</p>
                <button 
                  @click="$router.push({ name: 'Draw' })" 
                  class="mt-4 px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90"
                >
                  立即抽取
                </button>
              </div>
              
              <!-- 我放入的纸条列表 -->
              <div v-for="(note, index) in putNotes" :key="note.id" class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-4">
                  <div class="flex justify-between items-start">
                    <div class="flex items-start">
                      <img 
                        :src="note.gender === 'male' ? 'https://picsum.photos/100/100?random=4' : 'https://picsum.photos/100/100?random=5'" 
                        alt="用户头像" 
                        class="w-12 h-12 rounded-full object-cover"
                      />
                      <div class="ml-3">
                        <h3 class="font-medium text-neutral-800">{{ note.name }}</h3>
                        <p class="text-sm text-neutral-500 mt-1 line-clamp-2">{{ note.content }}</p>
                      </div>
                    </div>
                    <button @click="toggleMenu(index)" class="text-neutral-400 hover:text-neutral-600">
                      <i class="fa fa-ellipsis-h"></i>
                    </button>
                  </div>
                  
                  <!-- 操作菜单 -->
                  <div v-if="showMenuIndex === index" class="mt-3 bg-neutral-50 rounded-lg p-2">
                    <button @click="handleDeleteNote(note.id)" class="w-full text-left px-3 py-1.5 text-red-500 hover:bg-red-50 rounded">
                      <i class="fa fa-trash mr-1"></i> 删除
                    </button>
                  </div>
                  
                  <!-- 图片预览 -->
                  <div class="mt-3 flex space-x-2" v-if="note.images && note.images.length > 0">
                    <img 
                      v-for="(image, i) in note.images.slice(0, 2)" 
                      :key="i" 
                      :src="image" 
                      alt="个人照片" 
                      class="w-16 h-16 object-cover rounded"
                    />
                    <div v-if="note.images.length > 2" class="w-16 h-16 bg-neutral-100 rounded flex items-center justify-center text-neutral-500 text-sm">
                      +{{ note.images.length - 2 }}
                    </div>
                  </div>
                  
                  <!-- 底部信息 -->
                  <div class="mt-3 flex items-center justify-between text-xs text-neutral-500">
                    <p>{{ formatTime(note.time) }}</p>
                    <p>浏览量: {{ note.viewCount || 0 }}</p>
                  </div>
                </div>
              </div>
              
              <!-- 我抽到的纸条列表 -->
              <div v-for="(note, index) in drawnNotes" :key="note.id" class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-4">
                  <div class="flex justify-between items-start">
                    <div class="flex items-start">
                      <img 
                        :src="note.gender === 'male' ? 'https://picsum.photos/100/100?random=4' : 'https://picsum.photos/100/100?random=5'" 
                        alt="用户头像" 
                        class="w-12 h-12 rounded-full object-cover"
                      />
                      <div class="ml-3">
                        <h3 class="font-medium text-neutral-800">{{ note.name }}</h3>
                        <p class="text-sm text-neutral-500 mt-1 line-clamp-2">{{ note.content }}</p>
                      </div>
                    </div>
                    <button @click="toggleMenu(index)" class="text-neutral-400 hover:text-neutral-600">
                      <i class="fa fa-ellipsis-h"></i>
                    </button>
                  </div>
                  
                  <!-- 操作菜单 -->
                  <div v-if="showMenuIndex === index" class="mt-3 bg-neutral-50 rounded-lg p-2">
                    <button @click="handleReport(note.id)" class="w-full text-left px-3 py-1.5 text-neutral-700 hover:bg-neutral-100 rounded">
                      <i class="fa fa-flag mr-1"></i> 举报
                    </button>
                    <button @click="handleDeleteNote(note.id)" class="w-full text-left px-3 py-1.5 text-red-500 hover:bg-red-50 rounded">
                      <i class="fa fa-trash mr-1"></i> 删除
                    </button>
                  </div>
                  
                  <!-- 图片预览 -->
                  <div class="mt-3 flex space-x-2" v-if="note.images && note.images.length > 0">
                    <img 
                      v-for="(image, i) in note.images.slice(0, 2)" 
                      :key="i" 
                      :src="image" 
                      alt="个人照片" 
                      class="w-16 h-16 object-cover rounded"
                    />
                    <div v-if="note.images.length > 2" class="w-16 h-16 bg-neutral-100 rounded flex items-center justify-center text-neutral-500 text-sm">
                      +{{ note.images.length - 2 }}
                    </div>
                  </div>
                  
                  <!-- 底部信息和加好友按钮 -->
                  <div class="mt-3 flex items-center justify-between">
                    <div class="text-xs text-neutral-500">
                      {{ formatTime(note.time) }}
                    </div>
                    <button 
                      @click="handleAddFriend(note.userId, index)" 
                      :disabled="note.isFriend"
                      class="px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm font-medium disabled:opacity-50"
                    >
                      {{ note.isFriend ? '已添加' : '+ 加好友' }}
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      `
    };

    // 导航栏组件
    const BottomNavigation = {
      props: {
        currentRoute: {
          type: String,
          required: true
        }
      },
      template: `
        <nav class="fixed bottom-0 left-0 right-0 glassmorphism border-t border-white/20 py-2 px-4 flex justify-around items-center z-40">
          <a 
            href="#" 
            @click.prevent="$router.push({ name: 'Home' })" 
            :class="{ 'text-primary': currentRoute === 'Home' }"
            class="flex flex-col items-center text-neutral-500 hover:text-primary transition-colors"
          >
            <i class="fa fa-home text-xl"></i>
            <span class="text-xs mt-1">首页</span>
          </a>
          <a 
            href="#" 
            @click.prevent="$router.push({ name: 'Draw' })" 
            :class="{ 'text-primary': currentRoute === 'Draw' }"
            class="flex flex-col items-center text-neutral-500 hover:text-primary transition-colors"
          >
            <i class="fa fa-gift text-xl"></i>
            <span class="text-xs mt-1">抽取</span>
          </a>
          <a 
            href="#" 
            @click.prevent="$router.push({ name: 'PutNote' })" 
            :class="{ 'text-primary': currentRoute === 'PutNote' }"
            class="flex flex-col items-center text-neutral-500 hover:text-primary transition-colors"
          >
            <i class="fa fa-paper-plane text-xl"></i>
            <span class="text-xs mt-1">投放</span>
          </a>
          <a 
            href="#" 
            @click.prevent="$router.push({ name: 'MyNotes' })" 
            :class="{ 'text-primary': currentRoute === 'MyNotes' }"
            class="flex flex-col items-center text-neutral-500 hover:text-primary transition-colors"
          >
            <i class="fa fa-user text-xl"></i>
            <span class="text-xs mt-1">我的</span>
          </a>
        </nav>
      `
    };

    // 主应用组件
    const App = {
      components: {
        BottomNavigation
      },
      data() {
        return {
          userInfo: null
        };
      },
      created() {
        this.userInfo = mockApi.getUserInfo();
      },
      template: `
        <div class="min-h-screen">
          <router-view :user-info="userInfo" />
          <BottomNavigation :current-route="$route.name" />
        </div>
      `
    };

    // 路由配置
    const router = VueRouter.createRouter({
      history: VueRouter.createWebHashHistory(),
      routes: [
        {
          path: '/',
          name: 'Home',
          component: HomePage
        },
        {
          path: '/draw',
          name: 'Draw',
          component: DrawPage,
          props: true
        },
        {
          path: '/put-note',
          name: 'PutNote',
          component: PutNotePage
        },
        {
          path: '/note-detail',
          name: 'NoteDetail',
          component: NoteDetailPage,
          props: true
        },
        {
          path: '/my-notes',
          name: 'MyNotes',
          component: MyNotesPage
        }
      ]
    });

    // 创建应用实例
    const app = Vue.createApp(App);
    app.use(router);
    app.mount('#app');
  </script>
</body>
</html>    